<template>
  <div
    class="vc-carousel"
    :style="`--indicator-width: ${dataList.length * 20 + 10}px`"
  >
    <el-carousel
      ref="carousel"
      :autoplay="false"
      height="200px"
      indicator-position="none"
      v-bind="options"
    >
      <el-carousel-item
        v-for="(item, index) in dataList"
        :key="index"
      >
        <div class="carousel-item-body">
          <img
            :src="item['图片'] && (item['图片'].startsWith('http://') || item['图片'].startsWith('https://'))
                ? item['图片'] : (imageUrl + (item['图片'] || '__blank__'))"
            alt
          />
          <div class="title-mask">
            <span class="title">{{item['标题']}}</span>
          </div>
        </div>
      </el-carousel-item>
    </el-carousel>
    <div class="indicator">
      <span
        v-for="index in dataList.length"
        :class="activeIndex === index - 1 ? 'active' : ''"
      >{{index}}</span>
    </div>
  </div>
</template>

<script setup>
import { computed, nextTick, onMounted, ref, watch } from 'vue';
import visual from "@/visual/js/visual";

const props = defineProps({
  node: Object,
  compStyle: Object,
  compData: Object
});
const currNode = ref(props.node);
const loading = ref(true);
const dataList = ref([]);
const carousel = ref();
const activeIndex = computed(() => carousel.value?.activeIndex);
const imageUrl = ref(import.meta.env.VITE_IMAGE_PATH);

const init = async() => {
  loading.value = true;
  const compData = props.node.compData || {};
  if (compData.dataSourceType === '') {
    compData.dataSourceType = '静态数据';
  }
  await nextTick(() => loading.value = false);
};

const options = computed(() => {
  const compStyle = props.compStyle || {};
  const options = {};
  visual.addIfNotNull(options, compStyle, 'height');
  visual.addIfNotNull(options, compStyle, 'autoplay');
  visual.addIfNotNull(options, compStyle, 'interval');
  visual.addIfNotNull(options, compStyle, 'arrow');
  visual.addIfNotNull(options, compStyle, 'direction');
  return options;
});

const loadDataList = async() => {
  loading.value = true;
  dataList.value = (await visual.loadData(
    currNode.value.compData,
    {},
    {},
    currNode.value)).data || [];
  currNode.value.compData.dataList = JSON.stringify(dataList.value);
  await nextTick(() => loading.value = false);
};

watch(() => props.compStyle, () => {
  init();
}, { deep: true });

watch(() => props.node.compData, async() => {
  loading.value = true;
  await init();
  await loadDataList();
  await nextTick(() => loading.value = false);
}, { deep: true });

onMounted(async() => {
  await init();
  await loadDataList();
});
</script>

<style scoped lang="scss">
.vc-carousel {
  position: relative;
  .indicator {
    position: absolute;
    bottom: 0;
    right: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    span {
      display: inline-block;
      background-color: white;
      font-size: 12px;
      padding: 3px 5px;
      color: #0A0A0B;
      margin: 3px 5px 5px 0;
      cursor: pointer;
    }
    span.active {
      background-color: #0975c7;
      color: white;
    }
  }
}
.carousel-item-body {
  position: relative;
  height: 100%;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover
  }
  .title-mask {
    position: absolute;
    bottom: 0;
    left: 0;
    background: rgba(34, 34, 34, 0.5);
    width: 100%;
    .title {
      width: calc(100% - var(--indicator-width, 0px));
      color: white;
      white-space: nowrap;
      overflow: hidden;
      display: block;
      text-overflow: ellipsis;
      padding: 8px;
    }
  }
}
</style>
